<template>
  <a-drawer :open="visible" title="陈列模版详情" @close="onClose">
    <template #closeIcon>
      <div class="express-bar"></div>
      <div class="express-btn">
        <CloseCircleOutlined :size="32" @click="onClose" />
      </div>
    </template>
    <a-card size="small" title="基本信息">
      <a-descriptions size="small" :column="3">
        <a-descriptions-item label="模版名称">{{ detailList.template_name }}</a-descriptions-item>
        <a-descriptions-item label="陈列周期">{{ detailList.display_cycle }}</a-descriptions-item>
        <a-descriptions-item label="商品/现金">
          <span v-for="type in uniqueTypes(detailList?.detail)" :key="type">
            <span style="margin-right: 8px">{{ PROGRESS_STATUS_ENUM[type] }}</span>
          </span>
        </a-descriptions-item>
        <a-descriptions-item label="陈列要求">
          <span>{{ detailList.display_requirements }}</span>
        </a-descriptions-item>
        <a-descriptions-item label="更新时间">{{ detailList.update_time }}</a-descriptions-item>
        <a-descriptions-item label="创建时间">{{ detailList.create_time }}</a-descriptions-item>
        <!-- <a-descriptions-item label="创建者">{{ detailList.dealer?.name }}</a-descriptions-item> -->
      </a-descriptions>
    </a-card>
    <a-card class="smart-margin-top10" size="small" :tab-list="tabList" :active-tab-key="activeKey" @tabChange="(key) => (activeKey = key)">
      <template #customTab="{ tab }">
        <span class="ant-card-head-title" :style="compactModeClass">
          {{ tab }}
        </span>
      </template>
      <template v-if="activeKey === 'store'">
        <TemplateInventoryTable :enterpriseId="detailList" />
      </template>
    </a-card>
    <template #footer>
      <a-button @click="onClose">取消</a-button>
    </template>
  </a-drawer>
</template>

<script setup lang="ts">
import TemplateInventoryTable from './template-Inventory-table.vue'
import { displayApi } from '@/api/business/marketing/display-api'
import { message } from 'ant-design-vue'
import { errorSentry } from '@/lib/error-sentry'
const compactModeClass = inject('compactModeClass')
defineExpose({
  showDrawer
})
const emit = defineEmits(['refresh'])
// ----------------------------- tag单据状态 -----------------------------
const enum PROGRESS_STATUS_ENUM {
  '现金' = 1,
  '商品'
}

// --------------------- Drawer 显示与隐藏 ---------------------
// 是否展示
const visible = ref(false)
// 详情
const options = ref({})
const detailList = ref({})
// 详情tab
const activeKey = ref('store')
const tabList = [
  {
    key: 'store',
    tab: '商品明细'
  }
]

function showDrawer(item) {
  options.value = item
  detailData(item)
  visible.value = true
}

const detailData = async (val) => {
  detailList.value = {}
  try {
    const res = await displayApi.templateDetail({ id: val.id })
    detailList.value = res.data
  } catch (e) {
    if (e.status == 500) {
      message.error(e.response.data.message)
    } else {
      message.error(e.msg)
    }

    errorSentry.captureError(e)
  }
}

const onClose = () => {
  visible.value = false
}
// ------------------------------- 订单类型去重 ---------------------------------
const uniqueTypes = (val) => {
  // 使用 Set 去重
  const types = new Set(val ? val.map((item) => item.type) : [])
  return Array.from(types) // 将 Set 转换为数组
}
</script>
